<template>
  <div id="app">
    <h1>欢迎光临_Vue开发的收银系统_水果店</h1>
    <div class="table">
      <ul>
        <li><h2>苹果10元/斤，折扣 &lt;8折&gt;</h2></li>
        <li>
          <p>
            请输入你要购买的斤数 <input type="number" v-model.number="num" />
          </p>
        </li>
        <li><button @click="get(num)">结账买单~</button></li>
        <li>
          <p>
            <span>结账单:</span>总价：{{ tol }}¥ 元，折后价：{{ red }}¥
            元，省了：{{ les }}¥ 元
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      tol: 0,
      red: 0,
      les: 0,
    };
  },
  methods: {
    get(num) {
      //data里有的要用this.?
      //不用let...
      this.tol = num * 10;
      this.red = num * 8;
      this.les = this.tol - this.red;
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
body {
  #app {
    width: 800px;
    margin: 50px auto;

    h1 {
      text-align: center;
    }
    .table {
      border: 1px solid #ccc;
      margin-top: 10px;

      li {
        height: 25px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
      }
      h2 {
        font-size: 18px;
      }
    }
  }
}
</style>